<!--
 * @Author:  ssj wiz
 * @Date: 2021-06-26 10:10:17
 * @LastEditTime: 2023-10-30 18:05:03
 * @LastEditors: wiz
 * @Description: 周组件pmWeeks
        1、监听主属性this.currDate显示当月周数据,详见主功能函数getWeekData说明。
        2、通过setWeekData(dt: Date)可动态刷新组件数据。
 * @modify：
-->

<template>
  <div class="weeks">
    <div class="header">
      <div class="title">{{ getTitleI18n }}</div>
    </div>
    <div class="toolbar">
      <div role="button" class="vc-arrow is-left" @click="weekLeft">
        <svg
          width="26px"
          height="26px"
          viewBox="0 -1 16 34"
          class="vc-svg-icon"
        >
          <path
            d="M11.196 10c0 0.143-0.071 0.304-0.179 0.411l-7.018 7.018 7.018 7.018c0.107 0.107 0.179 0.268 0.179 0.411s-0.071 0.304-0.179 0.411l-0.893 0.893c-0.107 0.107-0.268 0.179-0.411 0.179s-0.304-0.071-0.411-0.179l-8.321-8.321c-0.107-0.107-0.179-0.268-0.179-0.411s0.071-0.304 0.179-0.411l8.321-8.321c0.107-0.107 0.268-0.179 0.411-0.179s0.304 0.071 0.411 0.179l0.893 0.893c0.107 0.107 0.179 0.25 0.179 0.411z"
          ></path>
        </svg>
      </div>

      <div role="button" class="vc-arrow is-right" @click="weekRight">
        <svg
          data-v-19b6cf78=""
          width="26px"
          height="26px"
          viewBox="-5 -1 16 34"
          class="vc-svg-icon"
        >
          <path
            data-v-19b6cf78=""
            d="M10.625 17.429c0 0.143-0.071 0.304-0.179 0.411l-8.321 8.321c-0.107 0.107-0.268 0.179-0.411 0.179s-0.304-0.071-0.411-0.179l-0.893-0.893c-0.107-0.107-0.179-0.25-0.179-0.411 0-0.143 0.071-0.304 0.179-0.411l7.018-7.018-7.018-7.018c-0.107-0.107-0.179-0.268-0.179-0.411s0.071-0.304 0.179-0.411l0.893-0.893c0.107-0.107 0.268-0.179 0.411-0.179s0.304 0.071 0.411 0.179l8.321 8.321c0.107 0.107 0.179 0.268 0.179 0.411z"
          ></path>
        </svg>
      </div>
    </div>

    <div class="main">
      <div
        v-for="el in weekData"
        @click="weekRowClick(el)"
        :class="['item', el.tigs]"
        :key="el.sort"
      >
        <b>{{ el.sort }}</b>
        <em>{{ el.week }}</em>
        <span>{{ el.beginDateStr }}~{{ el.endDateStr }}</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Ref, Watch } from 'vue-property-decorator';
import { T_srv, Tsrv, ifs, ts, tvs } from './config';

@Component
export default class oPmWeeks extends Vue {
  // 组件名
  private compName: string = 'oPmWeeks';

  // 月周标题
  private title: string = '';

  /* 周数据
     {
        sort           本月第几周
        week           全年第几周
        beginDate      周开始日期
        endDate        周结束日期
        tigs           底色样式 default not
      }
  */
  private weekData: any = [];

  private mode: number = 3;

  // 当前日期
  private currDate: Date = null;

  @Watch('currDate')
  watchWeekData(newValue: any, oldValue: any) {
    this.getWeekData(newValue, this.mode);
  }

  created() {
    this.currDate = new Date();
  }

  get getTitleI18n() {
    const mon: string = `month${this.currDate.getMonth() + 1}`;
    return `${this.currDate.getFullYear()} - ${this.$t(`i.datepicker.${mon}`)}`;
  }

  /**
   * 得到当前日期全月 周的明细 [第几周，全年第几周，周开始日期，周结束日期]
   * dt 日期
   * mode 6 周日为星期一, mode 3 周 1 为星期一
   */
  private getWeekData(dt: any, mode: number) {
    const d: any = new Date(dt);
    const currDate = new Date();
    const endDate: number = new Date(d.getYear(), d.getMonth(), 0).getDate();
    const arr = [];
    const date = new Date(d.setDate(1));
    let i: number = 0;
    while (date.getDate() <= endDate && date.getMonth() === d.getMonth()) {
      const L_startDate = Tsrv.utils.getWeekStartByDate(date, mode);
      const bD: string = `${
        L_startDate.getMonth() + 1 < 10 ? 0 : ''
      }${L_startDate.getMonth() + 1}/${
        L_startDate.getDate() < 10 ? 0 : ''
      }${L_startDate.getDate()}`;
      const tD = new Date(date);
      // const eDate = new Date(
      //   date.setDate(date.getDate() + (mode === 6 ? 6 : 7 - date.getDay()))
      // );
      date.setDate(date.getDate() + (mode === 6 ? 6 : 7 - date.getDay()));
      const eDate = new Date();
      eDate.setTime(L_startDate.getTime() + 6 * 24 * 60 * 60 * 1000);
      let tig: string = 'defautl';
      if (currDate >= tD && currDate <= eDate) {
        tig = 'not';
      }
      const eD: string = `${
        eDate.getMonth() + 1 < 10 ? 0 : ''
      }${eDate.getMonth() + 1}/${
        eDate.getDate() < 10 ? 0 : ''
      }${eDate.getDate()}`;
      // const L_week = this.GetCurrWeekByDateNew(date, mode);
      const L_week = Tsrv.utils.GetCurrWeekByDateNew(date, mode);
      const obj = {
        // 本月第几周
        sort: ++i,
        // 全年第几周
        week: `${L_week['year']}年第${L_week['weeks'] < 10 ? 0 : ''}${
          L_week['weeks']
        }周`,
        // 周开始日期
        beginDateStr: bD,
        // 周结束日期
        endDateStr: eD,
        beginDate: L_startDate,
        // 周结束日期
        endDate: eDate,
        weeks: L_week['weeks'],
        tigs: tig
      };
      date.setDate(date.getDate() + 1);
      arr.push(obj);
    }
    this.weekData = arr;
  }

  // 上一月
  public weekLeft() {
    this.currDate = new Date(
      this.currDate.setMonth(this.currDate.getMonth() - 1)
    );
  }

  // 下一月
  public weekRight() {
    this.currDate = new Date(
      this.currDate.setMonth(this.currDate.getMonth() + 1)
    );
  }

  // 设置当前时间的周数据
  public setWeekData(dt: Date) {
    this.currDate = dt;
  }

  public weekRowClick(data: any) {
    this.weekData.forEach((d: any) => {
      d.tigs = d.sort === data.sort ? 'not' : '';
    });
    this.$emit('weekRowClick', data);
  }
}
</script>
<style lang="scss" scoped>
.weeks {
  position: relative;
  width: 100%;
  min-width: 250px;
  color: #1a202c;
  background-color: #fff;
  border: 1px solid;
  border-color: #cbd5e0;
  border-radius: 0.5rem;
  .header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 18px 0 18px;
    width: 100%;
    .title {
      font-size: 18px;
      color: #2d3748;
      font-weight: 600;
      line-height: 28px;
      user-select: none;
      white-space: nowrap;
    }
  }
  .toolbar {
    width: 100%;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    pointer-events: none;
    .vc-arrow {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      user-select: none;
      pointer-events: auto;
      color: #718096;
      border-width: 2px;
      border-style: solid;
      border-radius: 0.25rem;
      border-color: transparent;
    }
  }
  .main {
    padding: 15px 10px 20px;
    .item {
      width: 100%;
      user-select: none;
      border-radius: 10px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      color: #2d3748;
      font-size: 14px;
      cursor: pointer;
      border: 1px solid var(--default-border-color);
      &.repair {
        background-color: #ccccff;
      }
      &.not {
        background-color: #edf2f7;
        // background-color: #ffadad;
      }
      &.already {
        background-color: #8de7ed;
      }
      & + .item {
        margin-top: 10px;
      }
      > b {
        display: inline-block;
        margin-right: 15px;
      }
      > em {
        display: inline-block;
        font-style: normal;
        margin-right: 15px;
      }
      > span {
        display: inline-block;
      }
    }
  }
}
</style>
